<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false">
        <n-grid x-gap="12" :y-gap="10" :cols="4">
          <n-gi>
            <n-card>
              <p>应用名称</p>
              <p>{{ MossJobEnum.APPNAME }}</p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>
                <a href="https://github.com/PowerJob/PowerJob" target="_blank">项目地址</a>
              </p>
              <p>
                <a href="https://github.com/PowerJob/PowerJob/wiki" target="_blank">文档地址</a>
              </p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>调度服务器时区：{{ systemInfo.timezone }}</p>
              <p>调度服务器时间：{{ systemInfo.serverTime }} </p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>本地时区：{{ Intl.DateTimeFormat().resolvedOptions().timeZone }}</p>
              <p>本地时间：{{ formatToDateTime(new Date()) }}</p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>任务总数</p>
              <p>{{ systemInfo.jobCount }}</p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>当前运行实例数</p>
              <p>{{ systemInfo.runningInstanceCount }}</p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>近期失败任务数</p>
              <p>{{ systemInfo.failedInstanceCount }}</p>
            </n-card>
          </n-gi>
          <n-gi>
            <n-card>
              <p>集群机器数</p>
              <p>{{ activeWorkerCount }}</p>
            </n-card>
          </n-gi>
        </n-grid>
      </n-card>
    </div>
    <n-card :bordered="false" class="mt-4 proCard">
      <n-data-table :columns="columns" :data="tableData" :bordered="false" />
    </n-card>

  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { listWorker, overview } from '@/api/job/job';
import { MossJobEnum } from '@/enums/mossJobEnum';
import { formatToDateTime } from '@/utils/dateUtil';
import { columns } from './columns';
const systemInfo = ref<any>({});
const activeWorkerCount = ref<number>(0);
const tableData = ref<any[]>([]);
const listWorkerApi = async () => {
  const data = await listWorker({ appId: MossJobEnum.APPID });
  tableData.value = data;
  let num = 0;
  data.forEach(w => {
    if (w.status !== 9999) {
      num++;
    }
  })
  activeWorkerCount.value = num;
}

const overviewApi = async () => {
  const data = await overview({ appId: MossJobEnum.APPID });
  systemInfo.value = data;
}

onMounted(() => {
  listWorkerApi();
  overviewApi();
})
</script>

<style lang="less" scoped></style>
